<template>
  <div>
    <el-container>
      <el-header>
        <p>查询</p>
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-input v-model="formInline.orderId"
                      placeholder="请输入要查询的订单号"
                      icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item label="支付方式：">
            <el-select v-model="formInline.payWay"
                       placeholder="请选择支付方式">
              <el-option :key="i"
                         :label="v.pay_way"
                         :value="v.pay_way"
                         v-for='(v,i) in payWayData'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="onSubmit">查询</el-button>
            <el-button type="primary"
                       @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData"
                  stripe
                  style="width: 100%"
                  :cell-style="{border:'1px solid #DCDCDC'}"
                  :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
          <el-table-column prop="order_id"
                           label="ID"
                           width="80"
                           align='center'></el-table-column>
          <el-table-column prop="order_num"
                           label="订单编号"
                           width="150"
                           align='center'></el-table-column>
          <el-table-column prop="customer_name"
                           label="用户名"
                           width="100"
                           align='center'></el-table-column>
          <el-table-column prop="order_time"
                           label="用餐时间"
                           width="180"
                           align='center'></el-table-column>
          <el-table-column prop="customer_type"
                           label="用户类别"
                           width="120"
                           align='center'></el-table-column>
          <el-table-column prop="cash_money"
                           label="消费金额"
                           width="80"
                           align='center'></el-table-column>
          <el-table-column prop="pay_way"
                           label="支付方式"
                           width="120"
                           align='center'></el-table-column>
          <el-table-column prop="table_num"
                           label="就餐桌号"
                           width="80"
                           align='center'></el-table-column>
          <el-table-column prop="order_state"
                           label="状态"
                           width="100"
                           align='center'></el-table-column>
          <el-table-column fixed="right"
                           label="操作"
                           align='center'>
            <template slot-scope="scope">
              <el-button @click="onCheck(scope.row)"
                         type="text"
                         size="small">查看订单</el-button>
              <el-button @click="onDel(scope.row)"
                         type="text"
                         size="small">删除</el-button>
              <el-button @click="onTran(scope.row)"
                         type="text"
                         size="small"
                         :style='scope.row.order_state=="已付款"?{display:"inline-block"}:{display:"none"}'>反位</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="[5,10,15,20,25,30]"
                       :page-size="count"
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="totalData.length">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped lang='less'>
* {
  box-sizing: border-box;
}
.el-header {
  border: 1px solid #dcdcdc;
  height: 100px !important;
  padding: 15px 30px;
  .el-form {
    margin-left: 50px;
    .el-form-item {
      margin-right: 60px;
      .el-input,
      .el-select {
        width: 260px;
      }
    }
  }
}
.el-main {
  margin-top: 15px;
  border: 1px solid #dcdcdc;
  padding: 18px 10px 20px 10px;
}
.el-table {
  margin-bottom: 50px;
}
.el-pagination {
  text-align: center;
}
</style>
<script>
export default {
  data () {
    return {
      // 搜索框数据
      formInline: {
        orderId: '',
        payWay: ''
      },
      // 支付方式数据
      payWayData: [],
      // 订单总数据
      totalData: [],
      // 中间数组
      centerData: [],
      // 页码
      page: 1,
      // 条数
      count: 5
    }
  },
  methods: {
    // 查询
    onSubmit() {
        this.$axios({
            url:'/yl/historyorder/gethistoryorder',
            params:this.formInline,
        }).then((res)=>{
            if(res.data.code==200){
              this.$message({
                  type: 'success',
                  message: '查询成功!'
              })
              this.totalData=res.data.data
              this.page=1
              this.totalData.forEach(v=>{
                  v.order_time=v.order_time.replace(/T/g,' ').slice(0,v.order_time.replace(/T/g,' ').indexOf('.'));
                  return v
              })
            }
        })
      })
    },
    // 重置
    onReset () {
      this.formInline = {
        orderId: '',
        orderWay: ''
      }
      this.getHistoryorder();
    },
    // 查看详情
    onCheck () {
      this.$router.push('/employee/orderdetail')
    },
    // 删除
<<<<<<< HEAD
    onDel(data){
        this.$alert('你确定要删除吗？',{
            title:'删除订单',
            callback: (action)=>{
              if(action=='confirm'){
                  this.$axios({
                      url:'/yl/historyorder/delhistoryorder',
                      method:'post',
                      data:{order_id:data.order_id}
                  }).then((res)=>{
                    if(res.data.code==200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getHistoryorder()
                        this.page=1 
                    }
                  })
              }else{
                  this.$message({
                      type: 'cancel',
                      message: '取消删除成功!'
                  });
              }
                
            }
        });
    },
    // 反位
    onTran(data){ 
      this.$alert('你确定要反位吗？',{
            title:'修改支付状态',
            callback: (action)=> {
              if(action=='confirm'){
                  this.$axios({
                      url:'/yl/historyorder/updatehistoryorderstate',
                      method:'post',
                      data:{order_id:data.order_id}
                  }).then((res)=>{
                      if(res.data.code==200){
                        this.$message({
                            type: 'success',
                            message: '修改支付成功!'
                        });
                        this.getHistoryorder()
                        this.page=1
                      }
                  })
              }else{
                this.$message({
                    type: 'cancel',
                    message: '取消成功!'
                });
              }
=======
    onDel (data) {
      this.$alert('你确定要删除吗？', {
        title: '删除订单',
        callback: () => {
          this.$axios({
            url: '/ch/historyorder/delhistoryorder',
            method: 'post',
            data: { order_id: data.order_id }
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getHistoryorder()
            this.page = 1
          })
        }
      });
    },
    // 反位
    onTran (data) {
      this.$alert('你确定要反位吗？', {
        title: '修改支付状态',
        callback: () => {
          this.$axios({
            url: '/ch/historyorder/updatehistoryorderstate',
            method: 'post',
            data: { order_id: data.order_id }
          }).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getHistoryorder()
              this.page = 1
>>>>>>> 3bd32d0692f7d897534a7d575f55e9873dfd15fb
            }
          })
        }
      });
    },
    // 每页多少条数据
    handleSizeChange (count) {
      this.count = count
    },
    // 分页
    handleCurrentChange (page) {
      this.page = page
    },
    // 获取支付方式
    getPayway () {
      this.$axios({
        url: '/yl/cashierwater/getpayway'
      }).then((res) => {
        this.payWayData = res.data.data
      })
    },
    // 获取所有数据
    getHistoryorder () {
      this.$axios({
        url: '/ch/historyorder/gethistoryorder'
      }).then((res) => {
        this.totalData = res.data.data
        this.totalData.forEach(v => {
          v.order_time = v.order_time.replace(/T/g, ' ').slice(0, v.order_time.replace(/T/g, ' ').indexOf('.'));
          return v
        })
      })
    }
  },
  // 创建后
  created () {
    this.getPayway();
    this.getHistoryorder();
  },
  // 计算
  computed: {
    // 每页数据
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count)
    }
  }
}
</script>